<template>
  <view class="main-box">
    <z-paging ref="paging" v-model="data.list" @query="getPromotionUserList" refresher-enabled>
      <template #top>
        <view class="w-full flex items-center bg-white">
          <view class="w-80%">
            <van-search
              :value="data.keyWord"
              @change="
                (e: any) => {
                  data.keyWord = e.detail;
                }
              "
              @search="searchData"
              placeholder="请输入昵称或手机号"
            >
            </van-search>
          </view>
          <view class="w-20%">
            <van-button type="primary" @click="searchData" size="small">搜索</van-button>
          </view>
        </view>
      </template>

      <view class="c-pd">
        <view v-for="(item, index) in data.list" :key="index" class="mb-3">
          <van-panel>
            <view slot="header" class="flex items-center c-pd">
              <image :src="item.promoteWxAppUrl ? item.promoteWxAppUrl : '/static/img/user/default-avatar.png'" class="w-10 h-10 c-br"></image>
              <view class="flex-1 ml-2">
                <view class="font-bold mb-1">昵称：{{ item.nickName }}</view>
                <view>手机号：{{ item.phone }}</view>
              </view>
            </view>
            <view slot="footer" class="text-align-end">
              <van-button @click="goAllocation(item.userId)" icon="cluster" type="primary" size="small">分配小区资源</van-button>
            </view>
          </van-panel>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import UserRequest from '@/request/userRequest';
import { navigate } from '@/utils/navigate';

interface IData {
  pages: {
    pageNo: number;
    pageSize: number;
    totalPage: number;
  };
  list: IPromotionUserList[];
  keyWord: string;
}

const data = reactive<IData>({
  pages: {
    pageNo: 1,
    pageSize: 20,
    totalPage: 1,
  },
  list: [],
  keyWord: '',
});

const paging = ref();

const getPromotionUserList = (pageNo: number, pageSize: number) => {
  UserRequest.GetPromotionUserList({ pageNo, pageSize, hasLoading: true, value: data.keyWord })
    .then((res) => {
      paging.value!.complete(res.data.list);
    })
    .catch((err) => {
      paging.value!.complete(false);
    });
};

const searchData = () => {
  paging.value.reload();
};

const goAllocation = (userId: number) => {
  navigate({ url: '/subcontract/person/promotionUserList/allocationList?userId=' + userId });
};
</script>

<style lang="scss" scoped>
:deep(.van-panel) {
  border-radius: 16rpx;
}
</style>
